<template>
	<view class="container">
		<view class="tui-order-header">
			<view class="view-content">
				<view>
					<view class="tui-status-text">{{getStatusText(status)}}</view>
					<view class="tui-reason"><text class="tui-reason-text">{{getReason(status)}}</text>
						<tui-countdown :time="1800" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)"
							borderColor="transparent" backgroundColor="transparent" v-if="status===1"></tui-countdown>
					</view>
				</view>
				<image :src="getImg(status)" class="tui-status-img" mode="widthFix"></image>
			</view>
		</view>
		<tui-list-cell arrow backgroundColor="#fefefe" @click="logistics" v-if="logisticsDetail">
			<view class="tui-flex-box">
				<image :src="'/static/images/my/img_order_logistics3x.png'" class="tui-icon-img"></image>
				<view class="tui-logistics">
					<view class="tui-logistics-text">{{logisticsDetail.status}}</view>
					<view class="tui-logistics-time">{{logisticsDetail.time}}</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell unlined :hover="false">
			<view class="tui-flex-box">
				<image :src="'/static/images/my/img_order_address3x.png'" class="tui-icon-img"></image>
				<view class="tui-addr" v-if="orderinfo.shipping_type==1">
					<view class="tui-addr-userinfo">{{orderinfo.receiver_name}}<text
							class="tui-addr-tel">{{orderinfo.receiver_mobile}}</text></view>
					<view class="tui-addr-text">{{orderinfo.receiver_address}}</view>
				</view>
				<view class="tui-addr" v-else>
					<view class="tui-addr-text">自提点提货</view>

				</view>
			</view>
		</tui-list-cell>

		<view class="tui-order-item">
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					商品信息
				</view>
			</tui-list-cell>
			<block v-for="(item,index) in orderinfo.order_goods_list" :key="index">
				<tui-list-cell padding="0">
					<view class="tui-goods-item">
						<image :src="item.picture.pic_cover_small" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{item.goods_name}}</view>
							<view class="tui-goods-attr">{{item.sku_name}}</view>
						</view>
						<view class="tui-price-right">
							<view>￥{{item.price}}</view>
							<view>x{{item.num}}</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥{{orderinfo.pay_money}}</view>
				</view>
				<!-- 		<view class="tui-price-flex  tui-size24">
					<view>优惠券</view>
					<view>￥0.00</view>
				</view> -->
				<view class="tui-price-flex  tui-size24">
					<view>配送费</view>
					<view>￥{{orderinfo.shipping_money}}</view>
				</view>
				<view class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{orderinfo.pay_money}}</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{orderinfo.pay_money}}</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">
					订单信息
				</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{orderinfo.order_no}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">付款方式:</view>
					<view class="tui-item-content">{{getPaytype(paytype)}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{orderinfo.create_time}}</view>
				</view>
				<view class="tui-order-flex" v-if="status>=1 || status==-1">
					<view class="tui-item-title">付款时间:</view>
					<view class="tui-item-content">{{orderinfo.pay_time}}</view>
				</view>
				<view class="tui-order-flex" v-if="status==2">
					<view class="tui-item-title">发货时间:</view>
					<view class="tui-item-content">{{orderinfo.consign_time}}</view>
				</view>
				<view class="tui-order-flex" v-if="status==3">
					<view class="tui-item-title">收货时间:</view>
					<view class="tui-item-content">{{orderinfo.consign_time}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content">包邮</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注:</view>
					<view class="tui-item-content">{{orderinfo.buyer_message}}</view>
				</view>
				<view class="tui-order-flex" v-if="status==2">
					<view class="tui-item-title">快递公司:</view>
					<view class="tui-item-content" v-if="orderinfo.order_goods_list[0]['express_info']['express_no']">
						{{orderinfo.order_goods_list[0]['express_info']['express_company']}}</view>
					<view class="tui-item-content" v-else>无需快递</view>
				</view>
				<view class="tui-order-flex" v-if="status==2">
					<view class="tui-item-title">快递单号:</view>
					<view class="tui-item-content" v-if="orderinfo.order_goods_list[0]['express_info']['express_no']">
						{{orderinfo.order_goods_list[0]['express_info']['express_no']}}</view>
					<view class="tui-item-content" v-else>无需快递</view>
				</view>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar tui-order-btn">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					v-if="status==0" @click="deleOrder">删除订单</tui-button>
			</view>


			<view class="tui-btn-mr">
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					@click="btnPay" v-if="status==0">立即支付</tui-button>
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					v-else-if="status==1">待发货中</tui-button>
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					@click="receipt" v-else-if="status==2">确认收货</tui-button>
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					@click="hascom" v-else-if="status==3">待评价</tui-button>
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					v-else-if="status==5">订单已失效</tui-button>

			</view>


		</view>
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" content="确定删除订单吗？" color="#333" :size="32"
			shape="circle"></tui-modal>

		<t-pay-way :show="show" :paypassword="paypassword" @close="popupClose" @keyboard="switchKeyboard(6)"
			:total_price="orderinfo.pay_money" :balance="balance" :out_trade_no="orderinfo.out_trade_no"
			:iswx="iswx"></t-pay-way>
		<tui-keyboards :radius="radius" :shows="shows" @close="closeKeyboard" @click="keyboardClick">
			<view class="tui-digital-box">
				<view class="tui-keyboard-tips">请输入密码</view>
				<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboards>
	</view>

</template>

<script>
	import tPayWay from "@/components/views/t-pay-way/ti-pay-way"
	export default {
		components: {
			tPayWay,
			descNum: function() {
				return this.desc.length
			}
		},
		data() {
			return {
				//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
				status: 1,
				show: false,
				order_id: '',
				orderinfo: '',
				shows: false,
				paytype: '1',
				popupShow: false,
				desc: "",
				iswx: false,
				descNum: 0,
				modal: false,
				balance: '',
				numberArr: [],
				pwdArr: ["", "", "", "", "", ""],
				temp: ["", "", "", "", "", ""],
				radius: false,
				paypassword: '',
				is_password: {
					type: Boolean,
					default: false
				},
				logisticsDetail: {
					status: '',
					time: ''
				}
			}
		},
		async onLoad(options) {
			this.tui.haslogin();
			if (options) {
				if (this.tui.isLogin()) {
					this.order_id = options.order_id;
					this.init();
				}

			};
		},
		methods: {
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					order_id: this.order_id,
				};
				// #ifndef MP-WEIXIN
				//#ifdef H5
				// let ua = window.navigator.userAgent.toLowerCase()
				// if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				// 	this.iswx = true;
				// }
				//#endif
				//#endif
				let result = this.tui.request('order', 'post', datas, 1000, 1, '', 'orderDetail');
				Promise.resolve(result).then((value) => {
					this.loading = true;
					uni.hideLoading();
					if (value.code == 200) {
						this.orderinfo = value.data;

						this.status = value.data.order_status >= 0 ? value.data.order_status : 6;

						this.paytype = value.data.payment_type - 1;

					} else {
						this.tui.toast(value.message);
					}
				})
				let account = this.tui.request('user', 'post', {
					token: token
				}, 1000, 1, '', 'userAccount');
				Promise.resolve(account).then((value) => {
					if (value.code == 200) {
						this.balance = value.data.balance;
					} else {
						this.tui.toast(value.message);
					}
				})

				let logistics = this.tui.request('order', 'post', {
					order_id: this.order_id
				}, 1000, 1, '', 'expressInfo');
				Promise.resolve(logistics).then((value) => {
					if (value.code == 200) {
						this.logisticsDetail = value.data[0]
					} else {
						this.logisticsDetail = false
						// this.tui.toast(value.message);
					}
				})
			},
			logistics() {
				uni.navigateTo({
					url: '/pages/timeaxis/timeaxis?order_id='+this.order_id
				})
			},
			getImg: function(status) {
				return ["/static/images/my/img_order_payment3x.png", "/static/images/my/img_order_send3x.png",
					"/static/images/my/img_order_received3x.png",
					"/static/images/my/img_order_signed3x.png", "/static/images/my/img_order_closed3x.png",
					"/static/images/my/img_order_send3x.png"
				][status]
			},
			getStatusText: function(status) {

				return ["等待您付款", "付款成功", "待收货", "已收货", "订单已完成", "交易关闭", "退款中"][status]
			},
			getReason: function(status) {
				return ["剩余时间", "等待卖家发货", "当前订单已发货", "当前订单已收货", "当前订单已完成", "订单已失效或已关闭", "当前订单正在退款中"][status]
			},
			getPaytype: function(paytype) {
				return ["微信支付", "支付宝支付", "余额支付"][paytype]
			},

			handleClick(e) {
				if (e.index == 1) {
					let token = this.tui.getToken();

					let datas = {
						token: token,
						order_id: this.order_id,
					};
					let result = this.tui.request('order', 'post', datas, 1000, 1, '', 'orderClose');
					Promise.resolve(result).then((value) => {
						if (value.code == 200) {
							this.tui.toast(value.message);
							let pages = getCurrentPages();
							let currPage = pages[pages.length - 1]; //当前页面
							let prevPage = pages[pages.length - 2]; //上一个页面
							//#ifdef MP-WEIXIN
							prevPage.onLoad()
							//#endif
							uni.navigateTo({
								url: '/pageschild/myOrder/myOrder'
							});
						} else {
							this.tui.toast(value.message);
						}
					})
				}
				this.hide();
			},
			hide() {
				this.modal = false;
			},
			switchKeyboard(index) {

				let length = index; //e.currentTarget.dataset.length;
				let arr = ["", "", "", "", "", ""]
				let radius = false

				if (length == 4) {
					arr = ["", "", "", ""]
					radius = true
				}
				this.pwdArr = arr;
				this.temp = arr;
				this.numberArr = [];
				this.radius = radius;

				this.shows = true;

			},
			closeKeyboard: function() {
				this.shows = false;
				this.numberArr = [];
				this.pwdArr = this.temp
			},
			getPwd: function() {
				//判断并取出密码

				if (this.numberArr.length === this.pwdArr.length) {
					uni.showLoading({
						title: '支付订单',
						mask: true
					})
					setTimeout(() => {
						let pwd = this.numberArr.join('')
						this.closeKeyboard();
						this.paypassword = pwd;
						let token = this.tui.getToken();
						var pays = {
							token: token,
							pay_type: 3,
							out_trade_no: this.orderinfo.out_trade_no,
							pay_app: 'wap',
							pay_password: this.paypassword
						}

						let paytype = this.tui.request('order', 'post', pays, 1000, 1, '', 'orderPay');
						Promise.resolve(paytype).then((value) => {
							if (value.code == 200) {
								uni.navigateTo({
									url: "../success/success?out_trade_no=" + this.orderinfo
										.out_trade_no
								})
							} else {

								this.tui.toast(value.message);
							}
						})

					}, 800);
				}
			},
			keyboardClick: function(e) {
				let numberArr = this.numberArr;
				let pwdArr = this.pwdArr;
				let index = e.index;
				if (numberArr.length === pwdArr.length || index == undefined) {
					return;
				}
				if (index == 9) { //取消键
					this.closeKeyboard();
					this.noClick = false;
					return;
				} else if (index == 11) {
					//退格键
					let len = numberArr.length;
					if (len) {
						pwdArr.splice(len - 1, 1, "");
					} else {
						pwdArr = this.temp;
					}
					numberArr.pop()
				} else if (index == 10) {
					numberArr.push(0);
					pwdArr.splice(numberArr.length - 1, 1, "●");
				} else {
					numberArr.push(index + 1);
					pwdArr.splice(numberArr.length - 1, 1, "●");
				}
				this.numberArr = numberArr;
				this.pwdArr = pwdArr;
				this.getPwd();
			},
			btnPay() {
				this.show = true
			},
			popupClose() {
				this.show = false
			},
			hidePopup: function() {
				this.popupShow = false;
			},
			showPopup: function() {
				this.popupShow = true;
			},
			deleOrder() {
				this.modal = true;
			},
			// refund(){
			// 	this.popupShow=true;
			// 	let token = this.tui.getToken();
			// 	if(this.desc==''){
			// 		this.tui.toast('请填写退款理由');
			// 		return;
			// 	}
			// 	let datas={
			// 		token: token,
			// 		order_id: this.order_id,
			// 		order_goods_id: this.order_id,
			// 		refund_reason:this.desc,
			// 	};

			// 	let result=this.tui.request('order','post',datas,1000,1,'','orderRefund');
			// 	Promise.resolve(result).then((value)=>{
			// 		this.loading = true;
			// 		uni.hideLoading();
			// 	   if(value.code==10000){
			//          this.tui.toast(value.message);
			// 		 this.init()
			// 	   }else{
			// 	   	 this.tui.toast(value.message);
			// 	   }
			// 	})
			// },
			receipt() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					order_id: this.order_id,
				};

				let result = this.tui.request('order', 'post', datas, 1000, 1, '', 'orderDelivery');
				Promise.resolve(result).then((value) => {
					this.loading = true;
					uni.hideLoading();
					if (value.code == 200) {
						this.tui.toast(value.message);
						this.init()
					} else {
						this.tui.toast(value.message);
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #EB0909;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-keyboard-tips {
		width: 100%;
		height: 120rpx;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		background: #fff;
		position: relative;
		color: #333;
		border: 0;
	}

	.view-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 50rpx 100rpx 50rpx;
	}

	.title {
		font-size: 30rpx;
		color: #666;
		padding-bottom: 32rpx;
	}

	.tui-ptop {
		margin-top: 40rpx;
	}

	.tui-cells {
		border: 1rpx solid #e6e6e6;
		border-radius: 4rpx;
		height: 280rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
	}

	.tui-textarea {
		height: 210rpx;
		width: 100%;
		color: #666;
		font-size: 28rpx;
	}

	.textarea-counter {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		height: 40rpx;
		line-height: 40rpx;
		padding-top: 4rpx;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #EB0909;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #EB0909;
		height: 100%;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;
	}
</style>